<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from aqvatarius.com/themes/aquarius_v17/ui.html by HTTrack Website Copier/3.x [XR&CO'2013], Fri, 03 Jan 2014 16:42:44 GMT -->
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->
    
    <title>UI elements - Aquarius - responsive admin panel</title>

    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
        <link href="css/ie7.css" rel="stylesheet" type="text/css" />
    <![endif]-->    
    <link rel='stylesheet' type='text/css' href='css/fullcalendar.print.css' media='print' />
    
    <script type='text/javascript' src='js/plugins/jquery/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.2.1.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery.mousewheel.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/cookie/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/bootstrap.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.js'></script>    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.stack.js'></script>    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.pie.js'></script>
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.resize.js'></script>
    
    <script type='text/javascript' src='js/plugins/sparklines/jquery.sparkline.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fullcalendar/fullcalendar.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/select2/select2.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/uniform/uniform.js'></script>
    
    <script type='text/javascript' src='js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/validation/languages/jquery.validationEngine-en.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/plugins/validation/jquery.validationEngine.js' charset='utf-8'></script>
    
    <script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
    <script type='text/javascript' src='js/plugins/animatedprogressbar/animated_progressbar.js'></script>
    
    <script type='text/javascript' src='js/plugins/qtip/jquery.qtip-1.0.0-rc3.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/cleditor/jquery.cleditor.js'></script>
    
    <script type='text/javascript' src='js/plugins/dataTables/jquery.dataTables.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/fancybox/jquery.fancybox.pack.js'></script>
    
    <script type='text/javascript' src='js/plugins/pnotify/jquery.pnotify.min.js'></script>
    <script type='text/javascript' src='js/plugins/ibutton/jquery.ibutton.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/scrollup/jquery.scrollUp.min.js'></script>
    
    <script type='text/javascript' src='js/cookies.js'></script>
    <script type='text/javascript' src='js/actions.js'></script>
    <script type='text/javascript' src='js/charts.js'></script>
    <script type='text/javascript' src='js/plugins.js'></script>
    <script type='text/javascript' src='js/settings.js'></script>
    
</head>
<body>
    <div class="wrapper"> 

        <div class="header">
            <a class="logo" href="index.html"><img src="img/logo.png" alt="Aquarius -  responsive admin panel" title="Aquarius -  responsive admin panel"/></a>
            <ul class="header_menu">
                <li class="list_icon"><a href="#">&nbsp;</a></li>
                <li class="settings_icon">
                    <a href="#" class="link_themeSettings">&nbsp;</a>
                    
                    <div id="themeSettings" class="popup">
                        <div class="head clearfix">
                            <div class="arrow"></div>
                            <span class="isw-settings"></span>
                            <span class="name">Theme settings</span>
                        </div>
                        <div class="body settings">
                            <div class="row-fluid">
                                <div class="span3"><strong>Style:</strong></div>
                                <div class="span9">
                                    <a class="styleExample tip active" title="Default style" data-style="">&nbsp;</a>                                    
                                    <a class="styleExample silver tip" title="Silver style" data-style="silver">&nbsp;</a>
                                    <a class="styleExample dark tip" title="Dark style" data-style="dark">&nbsp;</a>
                                    <a class="styleExample marble tip" title="Marble style" data-style="marble">&nbsp;</a>
                                    <a class="styleExample red tip" title="Red style" data-style="red">&nbsp;</a>                                    
                                    <a class="styleExample green tip" title="Green style" data-style="green">&nbsp;</a>
                                    <a class="styleExample lime tip" title="Lime style" data-style="lime">&nbsp;</a>
                                    <a class="styleExample purple tip" title="Purple style" data-style="purple">&nbsp;</a>                                    
                                </div>
                            </div>                            
                            <div class="row-fluid">
                                <div class="span3"><strong>Background:</strong></div>
                                <div class="span9">
                                    <a class="bgExample tip active" title="Default" data-style="">&nbsp;</a>
                                    <a class="bgExample bgCube tip" title="Cubes" data-style="cube">&nbsp;</a>
                                    <a class="bgExample bghLine tip" title="Horizontal line" data-style="hline">&nbsp;</a>
                                    <a class="bgExample bgvLine tip" title="Vertical line" data-style="vline">&nbsp;</a>
                                    <a class="bgExample bgDots tip" title="Dots" data-style="dots">&nbsp;</a>
                                    <a class="bgExample bgCrosshatch tip" title="Crosshatch" data-style="crosshatch">&nbsp;</a>
                                    <a class="bgExample bgbCrosshatch tip" title="Big crosshatch" data-style="bcrosshatch">&nbsp;</a>
                                    <a class="bgExample bgGrid tip" title="Grid" data-style="grid">&nbsp;</a>
                                </div>
                            </div>                            
                            <div class="row-fluid">
                                <div class="span3"><strong>Fixed layout:</strong></div>
                                <div class="span9">
                                    <input type="checkbox" name="settings_fixed" value="1"/>
                                </div> 
                            </div>
                            <div class="row-fluid">
                                <div class="span3"><strong>Hide menu:</strong></div>
                                <div class="span9">
                                    <input type="checkbox" name="settings_menu" value="1"/>
                                </div>                                           
                            </div>                            
                        </div>
                        <div class="footer">                            
                            <button class="btn link_themeSettings" type="button">Close</button>
                        </div>
                    </div>                    
                    
                </li>                
            </ul>    
        </div>

        <div class="menu">                

            <div class="breadLine">            
                <div class="arrow"></div>
                <div class="adminControl active">
                    Hi, Aqvatarius
                </div>
            </div>

            <div class="admin">
                <div class="image">
                    <img src="img/users/aqvatarius.jpg" class="img-polaroid"/>                
                </div>
                <ul class="control">                
                    <li><span class="icon-comment"></span> <a href="messages.html">Messages</a> <a href="messages.html" class="caption red">12</a></li>
                    <li><span class="icon-cog"></span> <a href="forms.html">Settings</a></li>
                    <li><span class="icon-share-alt"></span> <a href="login.html">Logout</a></li>
                </ul>
                <div class="info">
                    <span>Welcom back! Your last visit: 24.10.2012 in 19:55</span>
                </div>
            </div>

            <ul class="navigation">

                <li>
                    <a href="index.html">
                        <span class="isw-grid"></span><span class="text">Dashboard</span>
                    </a>
                </li>
                <li class="openable active">
                    <a href="#">
                        <span class="isw-list"></span><span class="text">UI elements</span>
                    </a>
                    <ul>
                        <li class="active">
                            <a href="ui.html">
                                <span class="icon-th"></span><span class="text">UI Elements</span>
                            </a>                  
                        </li>        
                        <li>
                            <a href="widgets.html">
                                <span class="icon-th-large"></span><span class="text">Widgets</span>
                            </a>                  
                        </li>
                        <li>
                            <a href="buttons.html">
                                <span class="icon-chevron-right"></span><span class="text">Buttons</span>
                            </a>                  
                        </li>  
                        <li>
                            <a href="icons.html">
                                <span class="icon-fire"></span><span class="text">Icons</span>
                            </a>                  
                        </li>                
                        <li>
                            <a href="grid.html">
                                <span class="icon-align-justify"></span><span class="text">Grid system</span>
                            </a>                  
                        </li>                        
                    </ul>                
                </li>          
                <li>
                    <a href="forms.html">
                        <span class="isw-archive"></span><span class="text">Forms stuff</span>                 
                    </a>
                </li>                        
                <li class="openable">
                    <a href="#">
                        <span class="isw-chat"></span><span class="text">Messages</span>
                    </a>
                    <ul>
                        <li>
                            <a href="messages.html">
                                <span class="icon-comment"></span><span class="text">Messages widgets</span></a>

                                <a href="#" class="caption yellow link_navPopMessages">5</a>

                                <div id="navPopMessages" class="popup" style="display: none;">
                                    <div class="head clearfix">
                                        <div class="arrow"></div>
                                        <span class="isw-chats"></span>
                                        <span class="name">Personal messages</span>
                                    </div>
                                    <div class="body messages">

                                        <div class="item">
                                            <div class="image"><a href="#"><img src="img/users/aqvatarius.jpg" class="img-polaroid"/></a></div>
                                            <div class="info clearfix">
                                                <a href="#" class="name">Aqvatarius</a>
                                                <p>Lorem ipsum dolor. In id adipiscing diam. Sed lobortis dui ut odio tempor blandit. Suspendisse scelerisque mi nec nunc gravida quis mollis lacus dignissim.</p>
                                                <span>19 feb 2012 12:45</span>
                                            </div>
                                        </div>

                                        <div class="item">
                                            <div class="image"><a href="#"><img src="img/users/olga.jpg" class="img-polaroid"/></a></div>
                                            <div class="info clearfix">
                                                <a href="#" class="name">Olga</a>
                                                <p>Cras nec risus dolor, ut tristique neque. Donec mauris sapien, pellentesque at porta id, varius eu tellus.</p>
                                                <span>18 feb 2012 12:45</span>
                                            </div>                                        
                                        </div>                        

                                        <div class="item">
                                            <div class="image"><a href="#"><img src="img/users/dmitry.jpg" class="img-polaroid"/></a></div>
                                            <div class="info clearfix">
                                                <a href="#" class="name">Dmitry</a>
                                                <p>In id adipiscing diam. Sed lobortis dui ut odio tempor blandit.</p>
                                                <span>17 feb 2012 12:45</span>
                                            </div>
                                        </div>                         

                                        <div class="item">
                                            <div class="image"><a href="#"><img src="img/users/helen.jpg" class="img-polaroid"/></a></div>
                                            <div class="info clearfix">
                                                <a href="#" class="name">Helen</a>
                                                <p>Sed lobortis dui ut odio tempor blandit. Suspendisse scelerisque mi nec nunc gravida quis mollis lacus dignissim. Donec mauris sapien, pellentesque at porta id, varius eu tellus.</p>
                                                <span>15 feb 2012 12:45</span>
                                            </div>
                                        </div>                                  

                                    </div>
                                    <div class="footer">
                                        <button class="btn link_navPopMessages" type="button">Close</button>
                                    </div>
                                </div>                                                                                                                          
                        </li>                                        
                    </ul>                


                </li>                                    
                <li>
                    <a href="statistic.html">
                        <span class="isw-graph"></span><span class="text">Statistics</span>
                    </a>
                </li>                                    
                <li>
                    <a href="tables.html">
                        <span class="isw-text_document"></span><span class="text">Tables</span>
                    </a>
                </li>     
                <li class="openable">
                    <a href="#">
                        <span class="isw-documents"></span><span class="text">Sample pages</span>
                    </a>
                    <ul>
                        <li>
                            <a href="user.html">
                                <span class="icon-info-sign"></span><span class="text">User info</span>
                            </a>                  
                        </li>
                        <li>
                            <a href="profile.html">
                                <span class="icon-user"></span><span class="text">User profile</span>
                            </a>                  
                        </li>                                                   
                        <li>
                            <a href="users.html">
                                <span class="icon-list"></span><span class="text">Users</span>
                            </a>
                        </li>      
                        <li>
                            <a href="stream.html">
                                <span class="icon-refresh"></span><span class="text">Stream activity</span>
                            </a>
                        </li>   
                        <li>
                            <a href="mail.html">
                                <span class="icon-envelope"></span><span class="text">Mailbox</span>
                            </a>
                        </li>        
                        <li>
                            <a href="edit.html">
                                <span class="icon-pencil"></span><span class="text">User edit</span>
                            </a>                  
                        </li>      
                        <li>
                            <a href="faq.html">
                                <span class="icon-question-sign"></span><span class="text">FAQ</span>
                            </a>
                        </li>
                        <li>
                            <a href="search.html">
                                <span class="icon-search"></span><span class="text">Search</span>
                            </a>
                        </li>                        
                    </ul>                                
                </li>              
                <li class="openable">
                    <a href="#">
                        <span class="isw-zoom"></span><span class="text">Other</span>                    
                    </a>
                    <ul>
                        <li>
                            <a href="gallery.html">
                                <span class="icon-picture"></span><span class="text">Gallery</span>
                            </a>
                        </li>
                        <li>
                            <a href="typography.html">
                                <span class="icon-pencil"></span><span class="text">Typography</span>
                            </a>
                        </li>     
                        <li>
                            <a href="wizard.html">
                                <span class="icon-share"></span><span class="text">Wizard</span>
                            </a>
                        </li>                        
                        <li>
                            <a href="files.html">
                                <span class="icon-upload"></span><span class="text">File handling</span>
                            </a>
                        </li>                                                             
                    </ul>               
                </li>    
                <li class="openable">
                    <a href="#">
                        <span class="isw-cancel"></span><span class="text">Error pages</span>                    
                    </a>
                    <ul>                    
                        <li><a href="403.html"><span class="icon-warning-sign"></span><span class="text">403 Forbidden</span></a></li>
                        <li><a href="404.html"><span class="icon-warning-sign"></span><span class="text">404 Not Found</span></a></li>
                        <li><a href="500.html"><span class="icon-warning-sign"></span><span class="text">500 Internal Server Error</span></a></li>
                        <li><a href="503.html"><span class="icon-warning-sign"></span><span class="text">503 Service Unavailable</span></a></li>
                        <li><a href="504.html"><span class="icon-warning-sign"></span><span class="text">504 Gateway Timeout</span></a></li>
                    </ul>
                </li>                         
            </ul>

            <div class="dr"><span></span></div>

            <div class="widget-fluid">
                <div id="menuDatepicker"></div>
            </div>

            <div class="dr"><span></span></div>

            <div class="widget">

                <div class="input-append">
                    <input id="appendedInputButton" style="width: 118px;" type="text"><button class="btn" type="button">Search</button>
                </div>            

            </div>

            <div class="dr"><span></span></div>        

            <div class="widget-fluid">

                <div class="wBlock clearfix">
                    <div class="dSpace">
                        <h3>Last visits</h3>
                        <span class="number">6,302</span>                    
                        <span>5,774 <b>unique</b></span>
                        <span>3,512 <b>returning</b></span>
                    </div>
                    <div class="rSpace">
                        <h3>Today</h3>
                        <span class="mChartBar" sparkType="bar" sparkBarColor="white"><!--240,234,150,290,310,240,210,400,320,198,250,222,111,240,221,340,250,190--></span>                                                                                
                        <span>&nbsp;</span>
                        <span>65% <b>New</b></span>
                        <span>35% <b>Returning</b></span>
                    </div>
                </div>

            </div>        

        </div>

        <div class="content">


            <div class="breadLine">

                <ul class="breadcrumb">
                    <li><a href="#">Simple Admin</a> <span class="divider">></span></li>                
                    <li class="active">UI elements</li>
                </ul>

                <ul class="buttons">
                    <li>
                        <a href="#" class="link_bcPopupList"><span class="icon-user"></span><span class="text">Users list</span></a>

                        <div id="bcPopupList" class="popup">
                            <div class="head clearfix">
                                <div class="arrow"></div>
                                <span class="isw-users"></span>
                                <span class="name">List users</span>
                            </div>
                            <div class="body-fluid users">

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/aqvatarius_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Aqvatarius</a>                                    
                                        <span>online</span>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/olga_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Olga</a>                                
                                        <span>online</span>
                                    </div>
                                </div>                        

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/alexey_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Alexey</a>  
                                        <span>online</span>
                                    </div>
                                </div>                              

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/dmitry_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Dmitry</a>                                    
                                        <span>online</span>
                                    </div>
                                </div>                         

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/helen_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Helen</a>                                                                        
                                    </div>
                                </div>                                  

                                <div class="item">
                                    <div class="image"><a href="#"><img src="img/users/alexander_s.jpg" width="32"/></a></div>
                                    <div class="info clearfix">
                                        <a href="#" class="name">Alexander</a>                                                                        
                                    </div>
                                </div>                                  

                            </div>
                            <div class="footer">
                                <button class="btn" type="button">Add new</button>
                                <button class="btn btn-danger link_bcPopupList" type="button">Close</button>
                            </div>
                        </div>                    

                    </li>                
                    <li>
                        <a href="#" class="link_bcPopupSearch"><span class="icon-search"></span><span class="text">Search</span></a>

                        <div id="bcPopupSearch" class="popup">
                            <div class="head clearfix">
                                <div class="arrow"></div>
                                <span class="isw-zoom"></span>
                                <span class="name">Search</span>
                            </div>
                            <div class="body search">
                                <input type="text" placeholder="Some text for search..." name="search"/>
                            </div>
                            <div class="footer">
                                <button class="btn" type="button">Search</button>
                                <button class="btn btn-danger link_bcPopupSearch" type="button">Close</button>
                            </div>
                        </div>                
                    </li>
                </ul>

            </div>

            <div class="workplace">

                <div class="row-fluid">
                    <div class="span12">

                        <div class="widgetButtons">                        
                            <div class="bb">
                                <a href="#" class="tipb" title="Edit item"><span class="ibw-edit"></span></a>
                                <div class="caption red">31</div>
                            </div>
                            <div class="bb gray">
                                <a href="#" class="tipb" title="Upload file"><span class="ibb-folder"></span></a>
                                <div class="caption">23</div>
                            </div>
                            <div class="bb yellow">
                                <a href="#" class="tipb" title="Add new"><span class="ibw-plus"></span></a>
                                <div class="caption green">14</div>
                            </div>
                            <div class="bb red">
                                <a href="#" class="tipb" title="Add to favorite"><span class="ibw-favorite"></span></a>
                                <div class="caption blue">53</div>
                            </div>
                            <div class="bb green">
                                <a href="#" class="tipb" title="Send mail"><span class="ibw-mail"></span></a>                            
                                <div class="caption yellow">87</div>
                            </div>
                            <div class="bb blue">
                                <a href="#" class="tipb" title="Settings"><span class="ibw-settings"></span></a>
                                <div class="caption gray">51</div>
                            </div>
                        </div>

                    </div>
                </div>            

                <div class="dr"><span></span></div>

                <div class="alert alert-block">                
                    <h4>Warning!</h4>
                    Best check yo self, you're not...
                </div>            

                <div class="alert alert-error">                
                    <h4>Error!</h4>
                    Hey, you have some error here... 
                </div>            

                <div class="alert alert-success">                
                    <h4>Success!</h4>
                    You successfully read this successful alert message.
                </div>            

                <div class="alert alert-info">                
                    <h4>Info!</h4>
                    This alert needs your attention, but it's not super important.
                </div>               

                <div class="dr"><span></span></div>
                
                <div class="row-fluid">
                    <div class="span12">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="container">
                                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </a>
                                    <a class="brand" href="#">Title</a>
                                    <div class="nav-collapse collapse navbar-responsive-collapse">
                                        <ul class="nav">
                                            <li class="active"><a href="#">Home</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li class="nav-header">Nav header</li>
                                                <li><a href="#">Separated link</a></li>
                                                <li><a href="#">One more separated link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <ul class="nav pull-right">
                                        <li><a href="#">Link</a></li>
                                            <li class="divider-vertical"></li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>    
                    </div>
                </div>
                
                <div class="dr"><span></span></div>
                
                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-list"></div>
                            <h1>Accordion</h1>
                        </div>
                        <div class="block-fluid accordion">

                            <h3>Section 1</h3>
                            <div>
                                <p>
                                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                </p>
                            </div>

                            <h3>Section 2</h3>
                            <div>
                                <p>
                                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                suscipit faucibus urna.
                                </p>
                            </div>

                            <h3>Section 3</h3>
                            <div>
                                <p>
                                Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                </p>
                                <ul>
                                    <li>List item one</li>
                                    <li>List item two</li>
                                    <li>List item three</li>
                                </ul>
                            </div>

                            <h3>Section 4</h3>
                            <div>
                                <p>
                                Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                                et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                                faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                                mauris vel est.
                                </p>
                                <p>
                                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                inceptos himenaeos.
                                </p>
                            </div>                        

                        </div>
                    </div>                                

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-list"></div>
                            <h1>Tabs</h1>
                        </div>
                        <div class="block-fluid tabs">

                            <ul>
                                <li><a href="#tabs-1">Tab 1</a></li>
                                <li><a href="#tabs-2">Tab 2</a></li>
                                <li><a href="#tabs-3">Tab 3</a></li>
                            </ul>                        

                            <div id="tabs-1">
                                <p>
                                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                </p>
                            </div>                        

                            <div id="tabs-2">
                                <p>
                                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                suscipit faucibus urna.
                                </p>
                            </div>

                            <div id="tabs-3">
                                <p>
                                Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                </p>
                                <ul>
                                    <li>List item one</li>
                                    <li>List item two</li>
                                    <li>List item three</li>
                                </ul>
                            </div>

                        </div>
                    </div>                

                </div>                

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-donw_circle"></div>
                            <h1>Sortable</h1>
                        </div>
                        <div class="block-fluid">
                            <ul class="sList" id="sort_1">
                                <li>Pellentesque habitant morbi</li>
                                <li>Vestibulum ante ipsum</li>
                                <li>Faucibus orci luctus</li>
                                <li>Nullam ut libero</li>
                                <li>Integer dignissim consequat</li>
                                <li>Class aptent taciti</li>
                                <li>Sed commodo magna quis</li>
                            </ul>                                                
                        </div>
                    </div>                                

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-ok"></div>
                            <h1>Selectable</h1>
                        </div>
                        <div class="block-fluid">
                            <ul class="sList" id="selectable_1">
                                <li>Pellentesque habitant morbi</li>
                                <li>Vestibulum ante ipsum</li>
                                <li>Faucibus orci luctus</li>
                                <li>Nullam ut libero</li>
                                <li>Integer dignissim consequat</li>
                                <li>Class aptent taciti</li>
                                <li>Sed commodo magna quis</li>
                            </ul>                                                
                        </div>
                    </div>                 

                </div>             

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span6">
                        <div class="block-fluid">                        
                            <div id="Datepicker"></div>                        
                        </div>
                    </div>                                

                </div>             

                <div class="dr"><span></span></div>            

                <div class="row-fluid">

                    <div class="span12">
                        <div class="head clearfix">
                            <div class="isw-ok"></div>
                            <h1>jQuery progress bars</h1>
                        </div>
                        <div class="block">

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Default
                                </div>
                                <div class="span9">
                                    <div id="progressbar-3" class="tipb" title="65%"></div>
                                </div>                            
                            </div>                        

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Animated progress bar
                                </div>                            
                                <div class="span9">
                                    <div id="progressbar-1">
                                        <div class="elapsed"></div>
                                        <div class="percent"></div>
                                        <div class="pbar"></div>                                    
                                    </div>
                                </div>                            
                            </div>

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Animated progress bar with delay
                                </div>                            
                                <div class="span9">
                                    <div id="progressbar-2">
                                        <div class="elapsed"></div>
                                        <div class="percent"></div>
                                        <div class="pbar"></div>                                                                        
                                    </div>
                                </div>                            
                            </div>                        

                        </div>
                    </div>                                

                </div>            

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span12">
                        <div class="head clearfix">
                            <div class="isw-brush"></div>
                            <h1>Bootstrap progress bars</h1>
                        </div>
                        <div class="block">

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Default
                                </div>
                                <div class="span9">
                                    <div class="progress">
                                        <div class="bar tipb" style="width: 60%;" title="60%"></div>
                                    </div>
                                </div>                            
                            </div>                        

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Striped progress bar
                                </div>                            
                                <div class="span9">
                                    <div class="progress progress-striped">
                                        <div class="bar tipb" style="width: 50%;" title="50%"></div>
                                    </div>
                                </div>                            
                            </div>                        

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Animated progress bar
                                </div>                            
                                <div class="span9">
                                    <div class="progress progress-striped active">
                                        <div class="bar tipb" style="width: 75%;" title="75%"></div>
                                    </div>
                                </div>                            
                            </div>

                            <div class="row-form clearfix">
                                <div class="span3">
                                    Additional colors
                                </div>                            
                                <div class="span9">
                                    <div class="progress progress-info">
                                        <div class="bar tipb" style="width: 20%" title="20%"></div>
                                    </div>
                                    <div class="progress progress-success">
                                        <div class="bar tipb" style="width: 40%" title="20%"></div>
                                    </div>
                                    <div class="progress progress-warning">
                                        <div class="bar tipb" style="width: 60%" title="20%"></div>
                                    </div>
                                    <div class="progress progress-danger">
                                        <div class="bar tipb" style="width: 80%" title="20%"></div>
                                    </div>                                
                                </div>                            
                            </div>                                               

                        </div>
                    </div>                                

                </div>             

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-refresh"></div>
                            <h1>Loaders</h1>

                            <ul class="buttons">
                                <li class="s_loader"><img src="img/loaders/s_loader_bw.gif" title="s_loader_bw.gif"/></li>
                                <li class="w_loader"><img src="img/loaders/w_loader_bw.gif" title="w_loader_bw.gif"/></li>
                                <li class="c_loader"><img src="img/loaders/c_loader_bw.gif" title="c_loader_bw.gif"/></li>
                                <li class="loader"><img src="img/loaders/loader_bw.gif" title="loader_bw.gif"/></li>
                            </ul>                                                  
                        </div>
                        <div class="block-fluid tabs">

                            <div class="row-form clearfix">
                                <div class="span3">Big roller:</div>
                                <div class="span9">                                
                                    <span><img src="img/loaders/loader.gif" title="loader.gif"/></span>
                                    <span><img src="img/loaders/loader_gr.gif" title="loader_gr.gif"/></span>
                                    <span><img src="img/loaders/loader_re.gif" title="loader_re.gif"/></span>
                                    <span><img src="img/loaders/loader_ye.gif" title="loader_ye.gif"/></span>
                                    <span><img src="img/loaders/loader_ge.gif" title="loader_ge.gif"/></span>                                
                                    <span><img src="img/loaders/loader_wh.gif" title="loader_wh.gif"/></span>                                
                                </div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">Roller:</div>
                                <div class="span9">                                
                                    <span><img src="img/loaders/s_loader.gif" title="s_loader.gif"/></span>
                                    <span><img src="img/loaders/s_loader_gr.gif" title="s_loader_gr.gif"/></span>
                                    <span><img src="img/loaders/s_loader_re.gif" title="s_loader_re.gif"/></span>
                                    <span><img src="img/loaders/s_loader_ye.gif" title="s_loader_ye.gif"/></span>
                                    <span><img src="img/loaders/s_loader_ge.gif" title="s_loader_ge.gif"/></span>                                
                                    <span><img src="img/loaders/s_loader_wh.gif" title="s_loader_wh.gif"/></span>                                
                                </div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">Wheel throbber:</div>
                                <div class="span9">                                
                                    <span><img src="img/loaders/w_loader.gif" title="w_loader.gif"/></span>
                                    <span><img src="img/loaders/w_loader_gr.gif" title="w_loader_gr.gif"/></span>
                                    <span><img src="img/loaders/w_loader_re.gif" title="w_loader_re.gif"/></span>
                                    <span><img src="img/loaders/w_loader_ye.gif" title="w_loader_ye.gif"/></span>
                                    <span><img src="img/loaders/w_loader_ge.gif" title="w_loader_ge.gif"/></span>                                
                                    <span><img src="img/loaders/w_loader_wh.gif" title="w_loader_wh.gif"/></span>                                
                                </div>
                            </div>  

                        <div class="row-form clearfix">
                                <div class="span3">Squares circle:</div>
                                <div class="span9">                                
                                    <span><img src="img/loaders/c_loader.gif" title="c_loader.gif"/></span>
                                    <span><img src="img/loaders/c_loader_gr.gif" title="c_loader_gr.gif"/></span>
                                    <span><img src="img/loaders/c_loader_re.gif" title="c_loader_re.gif"/></span>
                                    <span><img src="img/loaders/c_loader_ye.gif" title="c_loader_ye.gif"/></span>
                                    <span><img src="img/loaders/c_loader_ge.gif" title="c_loader_ge.gif"/></span>                                
                                    <span><img src="img/loaders/c_loader_wh.gif" title="c_loader_wh.gif"/></span>                                
                                </div>
                            </div>                          

                        </div>
                    </div>

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-sync"></div>
                            <h1>Sliders</h1>
                        </div>
                        <div class="block-fluid">                                    

                            <div class="row-form clearfix">
                                <div class="span3">Default:</div>
                                <div class="span9">
                                    <div class="amount" id="slider_1_amount">$60</div>
                                    <div id="slider_1"></div>                                
                                </div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">Rage:</div>
                                <div class="span9">
                                    <div class="amount" id="slider_2_amount">$17 - $67</div>
                                    <div id="slider_2"></div>                                
                                </div>
                            </div> 

                            <div class="row-form clearfix">
                                <div class="span3">Vertical:</div>
                                <div class="span9">
                                    <div class="amount" id="slider_3_amount">$10</div>
                                    <div id="slider_3" style="height: 100px;"></div>
                                    <div id="slider_4" style="height: 100px;"></div>
                                    <div id="slider_5" style="height: 100px;"></div>
                                </div>                   
                            </div>

                        </div>
                    </div>                

                </div>                                                            

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-up"></div>
                            <h1>jQuery dialog windows</h1>
                        </div>
                        <div class="block">                                    
                            <button class="btn" type="button" id="popup_1">Default</button>
                            <button class="btn" type="button" id="popup_2">Animation</button>
                            <button class="btn" type="button" id="popup_3">Modal</button>
                            <button class="btn" type="button" id="popup_4">Modal form</button>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-down"></div>
                            <h1>Bootstrap dialog windows</h1>
                        </div>
                        <div class="block">                           
                            <a href="#dModal" role="button" class="btn" data-toggle="modal">Default</a>
                            <a href="#bModal" role="button" class="btn" data-toggle="modal">Actions</a>
                            <a href="#fModal" role="button" class="btn" data-toggle="modal">Modal form</a>
                        </div>
                    </div>                                               
                </div>                         

                <div class="row-fluid">
                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-chat"></div>
                            <h1>Bootstrap tooltips</h1>
                        </div>
                        <div class="block">                           
                            <button class="btn tip" type="button" title="Default tooltip">Default .tip</button>
                            <button class="btn tipb" type="button" title="Bottom center tooltip">Bottom .tipb</button>
                            <button class="btn tipl" type="button" title="Left bottom tooltip">Left .tipl</button>
                            <button class="btn tipr" type="button" title="Right tooltip">Right .tipr</button>                        
                        </div>
                    </div>                                 
                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-chat"></div>
                            <h1>qTip tooltips</h1>
                        </div>
                        <div class="block">                           
                            <button class="btn tt" type="button" title="Default tooltip">Default .tt</button>
                            <button class="btn ttRC" type="button" title="Right center tooltip">Right center .ttRC</button>
                            <button class="btn ttRB" type="button" title="Right bottom tooltip">Right bottom .ttRB</button>
                            <button class="btn ttLT" type="button" title="Left top tooltip">Left top .ttLT</button>
                            <button class="btn ttLC" type="button" title="Left center tooltip">Left center .ttLC</button>
                            <button class="btn ttLB" type="button" title="Left bottom tooltip">Left bottom .ttLB</button>                                                                                                              
                        </div>
                    </div>                                  
                </div> 
                
                <div class="row-fluid">
                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-chat"></div>
                            <h1>pNotify</h1>
                        </div>
                        <div class="block">                           
                            <button class="btn" onclick="notify('Default','Right Top Notify');" type="button">Default</button>
                            <button class="btn" onclick="notify_s('Success','Success notify');" type="button">Success</button>
                            <button class="btn" onclick="notify_i('Info','Info notify');" type="button">Info</button>
                            <button class="btn" onclick="notify_e('Error','Error notify');" type="button">Error</button>                        
                        </div>
                    </div>                                                                                       
                </div>                  
                

            </div>

        </div>   

        <div class="dialog" id="b_popup_1" style="display: none;" title="Default">
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
        </div>

        <div class="dialog" id="b_popup_2" style="display: none;" title="Animation">
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>                
        </div>            

        <div class="dialog" id="b_popup_3" style="display: none;" title="Modal">
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>                
        </div>                        

        <div class="dialog" id="b_popup_4" style="display: none;" title="Modal form">                                
            <div class="block">
                <span>First name:</span>
                <p><input type="text" name="fname" value=""/></p>
                <span>Last name:</span>
                <p><input type="text" name="lname" value=""/></p>
                <span>About:</span>
                <p><textarea></textarea></p>
                <div class="dr"><span></span></div>
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet.</p>
            </div>
        </div>                                        

        <!-- Bootrstrap default dialog -->
        <div id="dModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Default</h3>
            </div>
            <div class="modal-body">
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
            </div>
        </div>      

        <!-- Bootrstrap modal -->
        <div id="bModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal</h3>
            </div>
            <div class="modal-body">
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Save updates</button> 
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>            
            </div>
        </div>                            

        <!-- Bootrstrap modal form -->
        <div id="fModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal form</h3>
            </div>        
            <div class="row-fluid">
                <div class="block-fluid">
                    <div class="row-form clearfix">
                        <div class="span3">First name:</div>
                        <div class="span9"><input type="text" value=""/></div>
                    </div>            
                    <div class="row-form clearfix">
                        <div class="span3">Last name:</div>
                        <div class="span9"><input type="text" value=""/></div>                    
                    </div>                                    
                    <div class="row-form clearfix">
                        <div class="span3">About:</div>
                        <div class="span9"><textarea></textarea></div>
                    </div>                                                
                </div>                
                <div class="dr"><span></span></div>
                <div class="block">                
                    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet.</p>
                </div>
            </div>                    
            <div class="modal-footer">
                <button class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Save updates</button> 
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>            
            </div>
        </div>    
    </div>    
</body>

<!-- Mirrored from aqvatarius.com/themes/aquarius_v17/ui.html by HTTrack Website Copier/3.x [XR&CO'2013], Fri, 03 Jan 2014 16:43:17 GMT -->
</html>
